<template>
  <div class="layout">
    <div class="navBar_1" v-if="flag">
      <div class="navBar">
        <div ref="title" class="navBar_title">Dovey朵唯</div>
        <ul class="navBar_list">
          <!-- <li ref="go1" @click="goHome">首页</li>
              <li @click="ChanPin">产品中心</li>
              <li @click="ShangJia">商家入驻</li>
              <li>公司动态</li>
              <li>留言反馈</li> -->
          <li
            v-for="(item, index) in tblist"
            :key="index"
            :class="{ active: index == currindex ? true : false }"
            @click="goTab(item.id, index)"
          >
            {{ item.name }}
          </li>
          <li>|</li>
          <li>登录</li>
          <li>注册</li>
        </ul>
      </div>
    </div>
    <div class="lay1" v-if="flag1">
      <div class="navBar_1">
        <div class="navBar">
          <div ref="title" class="navBar_title">Dovey朵唯</div>
          <ul class="navBar_list">
            <li
              v-for="(item, index) in tblist"
              :key="index"
              :class="{ active: index == currindex ? true : false }"
              @click="goTab(item.id, index)"
            >
              {{ item.name }}
            </li>
            <li>|</li>
            <li>登录</li>
            <li>注册</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
  <script setup>
import { useRouter } from "vue-router";
import { ref, reactive, onMounted } from "vue";
const router = useRouter();
const title = ref(null);
const flag = ref(true);
const flag1 = ref(false);
const currindex = ref(0);
const go1 = ref(null);
const selectChange = (e) => {
  let top = document.documentElement.scrollTop;
  console.log(top);
  if (top > 0) {
    flag.value = false;
    flag1.value = true;
  } else {
    flag.value = true;
    flag1.value = false;
  }
};
onMounted(() => {
  window.addEventListener("scroll", selectChange, true);
});
const tblist = reactive([
  {
    id: 1,
    name: "首页",
  },
  {
    id: 2,
    name: "产品中心",
  },
  {
    id: 3,
    name: "商家入驻",
  },
  {
    id: 4,
    name: "公司动态",
  },
  {
    id: 5,
    name: "留言反馈",
  },
]);
const goTab = (id, index) => {
  currindex.value = index;
  if (id == 1) {
    title.value.style.color = "blue";
    router.push("/home");
  } else if (id == 2) {
    title.value.style.color = "#fff";
    router.push("/chanpin");
  } else if (id == 3) {
    title.value.style.color = "#fff";
    router.push("/ShangJia");
  }
};
</script>
  <style scoped lang="less">
.layout {
  width: 100%;
  position: relative;
  img {
    width: 100%;
  }
  .navBar_1 {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    .navBar {
      width: 1200px;
      margin: 20px auto;
      display: flex;
      justify-content: space-between;

      .navBar_title {
        width: 20%;
        color: blue;
        font-size: 20px;
      }
      .navBar_list {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        margin: 0;
        .active {
          width: 100px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          background: blue;
          border-radius: 50px;
        }
        li {
          list-style: none;
          color: white;
        }
      }
    }
  }
  .lay1 {
    width: 100%;
    height: 80px;
    margin: 0 auto;
    position: fixed;
    z-index: 99;
    top: 0;
    opacity: 0.9  ;
    background: #ffffff;
    .navBar_1 {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      .navBar {
        width: 1200px;
        margin: 20px auto;
        display: flex;
        justify-content: space-between;

        .navBar_title {
          width: 20%;
          color: blue;
          font-size: 20px;
        }
        .navBar_list {
          width: 50%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0;
          margin: 0;
          .active {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: blue;
            border-radius: 50px;
            color: #fff;
          }
          li {
            list-style: none;
            color: blue;
          }
        }
      }
    }
  }
}
</style>
  